<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/huabao.css">
    <link rel="stylesheet" href="../../css/pulice.css">
    <script src="../../js/api.js"></script>
    <script src="../../js/libs/zepto.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/vconsole.min.js"></script>
    <script src="../../js/vue-resource.min.js"></script>
    <script src="../../js/aui-toast.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        setToken();
        $(function () {
            $('.hm-bar').load('../../data/headerOther.html',function (data) {
                $(this).find('.head-main').text('我的华宝');
                $(this).find('.hm-bar-box').css('background', '#2a8fff').css('position','static');
                $(this).find('.head-left').on('tap',function () {
                    window.history.back();
                })
            });
            var app = new Vue({
                el:'#box',
                data:{
                    account:{}
                },
                mounted:function () {
                    this.$nextTick(function () {
                        this.aaa();
                    })
                },
                methods:{
                    aaa:function () {
                        this.$http.get(SURL+"app/account/myHuaBao").then(function (res) {
                            console.log(res.body.data);
                            if(res.body.status == 1) {
                                this.account = res.body.data;
                            }else {

                            }
                        })
                    }
                }
            });
        })
    </script>
    <title>我的华宝</title>
</head>
<body>
<div class="hm-bar"></div>
    <div id="box">
        <!--身体-->
        <div class="WD-shenti">
            <div style="background-image: url(../../img/huabaoBJ.png)">
                <div class="st-top">
                    华宝余额
                </div>
                <div class="st-info">
                    {{account.account.kaiyuan}}
                </div>
            </div>
            <div class="WD-nav">
                <div class="WD-info flex">
                    <div class="lmLogo flex">
                        <img src="../../img/user3.png"/>
                        <p>华宝贷款<span>(待发)</span></p>
                    </div>
                    <div class="red-color">
                        {{account.account.freezeKaiyuan}}
                    </div>
                </div>
                <div class="WD-info flex" @click="location.href='../normalUser/redeem.html'">
                    <div class="lmLogo flex">
                        <img src="../../img/user11.png"/>
                        <p>赎回</p>
                    </div>
                    <div class="goIcon">
                        <img src="../../img/goIcon.png"/>
                    </div>
                </div>
                <div class="WD-info flex" @click="location.href='../businessUsers/shuhuijindu.html'">
                    <div class="lmLogo flex">
                        <img src="../../img/user7.png"/>
                        <p>赎回进度</p>
                    </div>
                    <div class="goIcon">
                        <img src="../../img/goIcon.png"/>
                    </div>
                </div>
                <div class="WD-info flex">
                    <div class="lmLogo flex">
                        <img src="../../img/user1.png"/>
                        <!--华宝记录页面没有-->
                        <p>华宝记录</p>
                    </div>
                    <div class="goIcon">
                        <img src="../../img/goIcon.png"/>
                    </div>
                </div>
                <div class="WD-info flex nobor">
                    <div class="lmLogo flex">
                        <img src="../../img/user4.png"/>
                        <!--华宝货款记录页面没有-->
                        <p>华宝货款记录</p>
                    </div>
                    <div class="goIcon">
                        <img src="../../img/goIcon.png"/>
                    </div>
                </div>
            </div>
            <canvas id="myChart" width="400" height="400"></canvas>
            <script>
                var ctx = document.getElementById("myChart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 255, 255, 1)',
                            ],
                            borderColor: [
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 2,
                            pointBorderWidth: 2,
                            fill: false,
                            pointHoverBorderColor: 'rgba(255, 159, 64, 1)',
                            pointHoverBackgroundColor: 'rgba(255, 255, 255, 1)',
                            pointHoverRadius: 3
                        }]
                    },
                    options: {
                        tooltips: {
                            enabled: false,
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 2,
                                    padding: 10,
                                },
                                gridLines: {
                                    drawBorder: true,
                                    drawTicks: false,
                                    color: 'rgba(21, 156, 55, 1)',
                                    zeroLineColor: 'rgba(21, 156, 55, 1)'
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    padding: 10
                                },
                                gridLines: {
                                    display: false,
                                    drawTicks: false
                                }
                            }],
                        },
                        legend: {
                            labels: {
                                generateLabels: {
                                    hidden: true
                                }
                            }
                        },
                    }
                });
            </script>
        </div>
    </div>
</body>
</html>
